<template>
  <div class='offer'>
    <div class='content'
         v-if='groupingData&&groupingData.length'>
      <table v-for='item in groupingData'
             :key='item.title.JianMa'>
        <div class='card-num'>
          <div>客户卡号 : {{item.title.JianMa}}
            {{item.title.KH_name}}
          </div>
          <!-- <div>报价=货款+物流费+平台费+品牌费
          </div> -->
        </div>
        <thead class='thead'>
          <tr @click="selectCheck(item,'-1')">

            <th>  商品名称</th>
            <th>欠桶量</th>
            <th>押桶量</th>

          </tr>
        </thead>
        <tbody>
          <tr v-for='(items,indexs) in item.arr'
              :key='indexs'>
            <td>
              <div>{{items.HuoHao}}</div>
              <div>{{items.SPMingCheng}}</div>
            </td>
            <td>{{items.QianTong}}桶</td>
            <td>{{items.YaTong}}桶</td>
          </tr>
          <tr class='total'>
            <td>
              总计
            </td>
            <td>{{item.total.TqianTong}}桶</td>
            <td>{{item.total.TyaTong}}桶</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-else>
      <default-none :text="'暂无相关信息'"></default-none>
    </div>
  </div>
</template>

<script>
import { QianTongLiteapp } from '@/api/api'
import defaultNone from '@/components/defaultNone'
export default {
  data () {
    return {
      groupingData: null

    }
  },

  components: {
    defaultNone
  },

  computed: {
    store () {
      return this.$store.state
    }
  },
  onShow () {
    this.getBaoJiaLiteapp()
  },
  methods: {

    async getBaoJiaLiteapp () {
      let res = await QianTongLiteapp()
      // 遍历查询找出想同ID
      let keysObj = {}
      for (let key of res) {
        key.isSelect = false
        if (keysObj[key.JianMa]) {
          keysObj[key.JianMa].arr.push(key)
          keysObj[key.JianMa].total.TqianTong += key.QianTong

          keysObj[key.JianMa].total.TyaTong += key.YaTong
        } else {
          keysObj[key.JianMa] = {
            title: key,
            arr: [key],
            total: {
              TqianTong: key.QianTong,
              TyaTong: key.YaTong
            }
          }
        }
      }
      console.log(keysObj)

      // 根据key区分数组
      let groupingData = []
      for (let key in keysObj) {
        groupingData.push(keysObj[key])
      }

      this.groupingData = groupingData
    }

  }
}
</script>
<style lang='scss' scoped>
@import '@/common/scss/base.scss';
.offer {
  background: #fff;
  padding: 0 30px;
  .content {
    padding-bottom: 94px;
  }
  table {
    padding-bottom: 40px;
    .card-num {
      height: 80px;
      @include fjc;
      > div:first-child {
        @include fontSize(28);
      }
      div {
        @include color666;
        @include fontSize(24);
      }
    }
    thead {
      display: table;
      @include border-top(#b5b4b5);
      tr {
        display: table-row;

        @include border-bottom(#b5b4b5);
        background: #e5e4e5;
        th {
          display: table-cell;
          text-align: center;
          vertical-align: middle;
          padding:0 10px;
          @include fontSize(28);
          color: #222;
          min-height: 80px;
        }
      }
    }
    tbody {
      display: table;
      @include border-left(#b5b4b5);
      tr {
        display: table-row;

        background: #f8f8f7;
        td {
          @include color666;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          @include fontSize(28);
          min-height: 80px;
          @include border-bottom(#b5b4b5);
        }
        td:first-child {
          text-align: left;
          padding: 0 10px;
        }
        .assemble:after {
          border-bottom: none !important;
        }
        .assemble-num {
          position: absolute !important;
          right: 0;
          bottom: 0;
          width: 156px;
          @include fjc(center);
          &:after {
            border: none !important;
          }
        }
      }
    }
    thead tr,
    tbody tr {
      @include border-left(#b5b4b5);
      th,
      td {
        @include border-right(#b5b4b5);
        box-sizing: border-box;
      }
      > th:first-child,
      td:first-child {
        @include fjc;
        width: 348px;

        flex-flow: row wrap;
        > div {
          width: 348px;
        }
      }

      > td:nth-child(2),
      th:nth-child(2),
      th:nth-child(3),
      th:nth-child(4),
      td:nth-child(3),
      td:nth-child(4) {
        min-width: 173px;
      }
    }
    .total {
      td {
        color: $red !important;
      }
      td:first-child {
        color: #666 !important;
      }
    }
  }
}
.to-buy {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  background: #fff;
  justify-content: flex-end;
  > div {
    background: $primaryColor;
    color: #fff;
    @include wh(216, 84);
    @include fjc(center);
    @include fontSize(30);
  }
  > .disable {
    background: #ccc;
  }
}
</style>